@use "scss/colors";
@use "scss/variables";

$icon-size: 20px;

.icon {
  width: 28px; // same size as Sync column header width
  height: $icon-size;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity variables.$transition-out;
  opacity: 0;

  &.visible {
    opacity: 1;
  }

  &.plus {
    color: colors.$green;
  }

  &.minus {
    color: colors.$red;
  }

  &.changed {
    color: colors.$blue;
  }
}
